<template>
  <div class="markdowned" v-html="compiledMarkdown"></div>
</template>

<script lang="ts">
var MDRenderer = require('../../app/services/markdown.ts')
export default {
  name: 'a-markdown',
  props: ['content'],
  data() {
    return {}
  },
  computed: {
    compiledMarkdown(this: any) {
      if (typeof this.content !== 'undefined') {
        return MDRenderer(this.content)
      }
      return ''
    },
  },
}
</script>

<style lang="scss">
@import '../scss/globals';
/*
    The elements generated by v-html doesn't have the usual scoped data-v-... tags, so they can't be targeted with scoped css this way.

    One possible solution is from here:
    https://medium.com/@brockreece/scoped-styles-with-v-html-c0f6d2dc5d8e

    But it doesn't work because we're using SCSS and not CSS, which means the >>> defined in Vue Loader does not actually activate.

    We'll have to disable the scoped attributed for this one.
   */

.markdowned {
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    &:first-child {
      margin-top: 0;
    }
  }
  hr {
    background-color: rgba(255, 255, 255, 0.25);
    height: 3px;
    border: none;
  }
} // .markdowned>>>h1 {
//   background-color: aquamarine;
// }
</style>
